<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test: font-stretch:extra-condensed</title>
    <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
    <link rel="help" href="http://dev.w3.org/csswg/css3-fonts/#font-stretch-prop" />
    <meta name="flags" content="" />
    <meta name="assert" content="the 'font-stretch' property set to 'extra-condensed' renders the font face narrower width compare to normal font face." />
    <style type="text/css">
        @font-face
        {
            font-family: MyTestFont;
            src: local("Arial Narrow");
			font-stretch: condensed;
        }
		@font-face
        {
            font-family: MyTestFont;
            src: local("Engravers MT");
			font-stretch: expanded;
        }
		@font-face
        {
            font-family: MyTestFont;
            src: local(Arial);
			font-stretch: normal;
        }
		div
        {
            font-family: MyTestFont;
            font-size: 16px;
        }		
        #test1
        {
            font-stretch: ultra-condensed;
        }
		#test2
        {
            font-stretch: extra-condensed;
        }
		#test3
        {
            font-stretch: condensed;
        }
		#test4
        {
            font-stretch: semi-condensed;
        }
		#test5
        {
            font-stretch: normal;
        }
		#test6
        {
            font-stretch: semi-expanded;
        }
		#test7
        {
            font-stretch: expanded;
        }#test8
        {
            font-stretch: extra-expanded;
        }#test9
        {
            font-stretch: ultra-expanded;
        }
    </style>
</head>
<body>
    <p>Test passes if the following two statements are true:
	<br> 1) the first 4 line are the same length and shorter than the 5th line
	<br> 2) the last 4 lines are the same length and longer than the first 5 lines.</p>
	<div id="test1">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test2">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test3">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test4">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>	
	<div id="test5">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test6">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test7">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test8">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
	<div id="test9">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>	
</body>
</html>
